import React from 'react'
import { Form, Row, Button, Select, Input, Col, DatePicker } from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const { MonthPicker } = DatePicker;
const SearchForm = ({ form: { getFieldDecorator, getFieldsValue, resetFields }, onSearch, onClick, onClick1, advanced1 }) => {
    const cz = () => {
        if (onClick) {
            onClick();
        }
    };
    const advancedss = () => {
        if (onClick1) {
            onClick1();
        }
    }
    const formItemLayout = {
        // 抽屉里面Form。二列的布局比例
        labelCol: {
            span: 6
        },
        wrapperCol: {
            span: 16
        }
    };
    return (
        <Form className="search-form">
            <Row gutter={24}>
                <Col span={5}>
                    <FormItem label='批号:'{...formItemLayout}>
                        {getFieldDecorator('batchNo', {
                            getValueFromEvent: (event) => {
                                return event.target.value.replace(/\s+/g, "")
                            },
                        })(          //回车时查询    
                            <Input placeholder='请输入' allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={20}></Input>
                        )}

                    </FormItem>
                </Col>
                <Col span={5}>
                    <FormItem label='装配部门:'{...formItemLayout}>
                        {getFieldDecorator('assemblyDept', {
                            getValueFromEvent: (event) => {
                                return event.target.value.replace(/\s+/g, "")
                            },
                        })(          //回车时查询  
                            <Input placeholder='请输入' allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={20}></Input>
                        )}
                    </FormItem>
                </Col>
                <Col span={5}>
                    <FormItem label='变更日期:'{...formItemLayout}>
                        {getFieldDecorator('changeTime')(
                            <DatePicker placeholder="请选择日期" allowClear />
                        )}
                    </FormItem>
                </Col>
                <Col span={5}>
                    <FormItem label='变更人:'{...formItemLayout}>
                        {getFieldDecorator('user', {
                            getValueFromEvent: (event) => {
                                return event.target.value.replace(/\s+/g, "")
                            },
                        })(
                            <Input placeholder='请输入' allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={20}></Input>
                        )}
                    </FormItem>
                </Col>
                <Col span={4} style={{ display: 'flex' }} className="serarch-btns">
                    <FormItem>
                        <Button type="primary" icon="search" onClick={() => onSearch(getFieldsValue())}>
                            {'查询'}
                        </Button>
                    </FormItem>
                    <FormItem>
                        <Button type='primary' icon={advanced1 ? 'up' : 'down'} onClick={() => advancedss()}>
                            {' 展开'}
                        </Button>
                    </FormItem>
                    <FormItem>
                        <Button type="default" onClick={() => {
                            cz()
                            resetFields()
                        }}
                            icon={'redo'}
                        >
                            {'重置'}
                        </Button>
                    </FormItem>
                </Col>
            </Row>
            <Row gutter={24}>
                {
                    advanced1 ? <Col span={5}>
                        <FormItem label='变更类型:'{...formItemLayout}>
                            {getFieldDecorator('changeType', {
                                getValueFromEvent: (event) => {
                                    return event.target.value.replace(/\s+/g, "")
                                },
                            })(
                                <Input placeholder='请输入' allowClear onPressEnter={() => onSearch(getFieldsValue())} maxLength={20}></Input>
                            )}
                        </FormItem>
                    </Col> : ''
                }
            </Row>
        </Form>
    )
};
export default Form.create()(SearchForm);